import {getMultiData,getGoodsData} from '../../service/home.js'
Page({
  data: {
    banners:[],
    recommends: [],
    titles:[
      {id:0,name:'新款'},{id:1,name:'流行'},{id:2,name:'精选'}
    ],
    types: ['new','pop','sell'],
    currentGoodsType: 'new',
    goods: {  //商品数据
      new: {page: 1, list:[]},
      pop: {page: 1, list:[]},
      sell: {page: 1, list:[]}
    },
    isShowBackToTop: false, //是否显示回到顶部按钮
    isTabsFix: false,  //tabcontrol是否吸顶
    tabScrollTop: 0  //吸顶高度 
  },
  onLoad() {
    //1. 获取轮播图数据+推荐数据
    this._getMultiData()
    //2.初次请求商品数据
    this._getGoodsData('new')
    this._getGoodsData('pop')
    this._getGoodsData('sell')
  },
  //----------- 网络请求函数 -------------------------- 
  _getGoodsData(type){
    getGoodsData(type,this.data.goods[type].page)
    .then(res=>{
      //页码+1 数据往里填充
      this.setData({
        [`goods.${type}.page`]: this.data.goods[type].page + 1 ,
        [`goods.${type}.list`]: this.data.goods[type].list.concat(res.data.data.list)
      })
    })
  },           
  _getMultiData(){
    getMultiData()
    .then(res=>{
      this.setData({
        banners: res.data.data.banner.list,
        recommends: res.data.data.recommend.list
      })
    })
  },

  //----------- 事件监听函数 ------------------------
  tabClick(e){
    //取出index
    const index = e.detail
    //设置currentType
    this.setData({
      currentGoodsType: this.data.types[index]
    })

    if(this.data.isTabsFix){
      this.selectComponent("#tab-control").setCurrentIndex(index)
    }else{
      this.selectComponent("#fixed-tab-control").setCurrentIndex(index)
    }
  },
  //页面触底事件
  onReachBottom(){
    //下拉加载更多
    this._getGoodsData(this.data.currentGoodsType)
  },
  //监听页面滚动高度
  onPageScroll(e){
    //修改是否显示回到顶部按钮
    //官方：不要再回调函数过多调用setData
    const flag = e.scrollTop>500
    if(flag!=this.data.isShowBackToTop){  //如果标志是相同的话就不频繁设置啦
      this.setData({
        isShowBackToTop: flag
      })
    }

    //修改是否tabs吸顶
    const tabFlag = e.scrollTop > this.data.tabScrollTop
    if(tabFlag!= this.data.isTabsFix){
      this.setData({
        isTabsFix: tabFlag
      })
    }

  },
  //回到顶部
  handleBackToTop(){
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 1000,
    })
  },
  //监听流行数据的图片价值完成，然后获取tabcontrol高度
  imageIsLoad(){
    wx.createSelectorQuery().select("#tab-control").boundingClientRect(rect=>{
      this.data.tabScrollTop = rect.top
    }).exec()
  }
})